<template>
  <div class="my-body">
    <el-form :inline="true" :modal="searchForm">
      <el-form-item>
        <el-input placeholder="请输入" v-model="searchForm.groupCode" maxlength="100">
          <template slot="prepend">组</template>
        </el-input>
      </el-form-item>
      <el-button type="primary" style="width: 100px">查询</el-button>
      <el-button type="primary" plain style="width: 100px" @click="dialogShow = true">添加</el-button>
    </el-form>
    <el-table :data="tableData" border ref="multipleTable" :span-method="objectSpanMethod">
      <el-table-column label="组" prop="groupCode"/>
      <el-table-column label="key" prop="dicKey"/>
      <el-table-column label="value" prop="dicValue"/>
      <el-table-column label="操作" width="200">
        <template slot-scope="scope">
          <el-link type="primary" :loading="loading" :underline="false" @click="edit(scope.row)">编辑</el-link>
          <el-popconfirm title="这是一段内容确定删除吗？" @onConfirm="del(scope.row)">
            <el-link type="danger" slot="reference" :loading="loading" :underline="false" style="margin-left: 5px;">删除
            </el-link>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination background layout="prev, pager, next" style="margin-top: 10px" v-show="page.total"
                   :page-size="page.pageSize"
                   :total="page.total"
                   :current-page="page.currentPage"
                   @current-change="currentChange">
    </el-pagination>
    <!--  编辑-->
    <el-dialog title="编辑" :close-on-click-modal="false" :visible.sync="dialogShow" width="500px" @close="closeMode">
      <el-form ref="ruleForm" :model="form" :rules="rules" label-width="80px" style="margin-right: 50px">
        <el-form-item label="组：" prop="groupCode">
          <el-input v-model="form.groupCode" placeholder="请输入"/>
        </el-form-item>
        <el-form-item label="Key：" prop="dicKey">
          <el-input v-model="form.dicKey" placeholder="请输入"/>
        </el-form-item>
        <el-form-item label="Value：" prop="dicValue">
          <el-input v-model="form.dicValue" placeholder="请输入"/>
        </el-form-item>
      </el-form>
      <el-row type="flex" justify="center">
        <el-button @click="dialogShow = false">关闭</el-button>
        <el-button type="primary" @click="submit()" :loading="loading">提交</el-button>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import service from "@/api/service";
import table from "@/mixins/table";
import mergeTable from "@/mixins/mergeTable";

export default {
  name: "dic",
  mixins: [table, mergeTable],
  data() {
    return {
      form: {
        groupCode: '',
        dicKey: '',
        dicValue: '',
      },
      rules: {
        groupCode: {required: true, trigger: 'blur', message: '不能为空'},
        dicKey: {required: true, trigger: 'blur', message: '不能为空'},
        dicValue: {required: true, trigger: 'blur', message: '不能为空'},
      },
      mergeField:['groupCode']
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      let form = {
        ...this.searchForm,
        page: this.page.currentPage
      }
      service.get('/small-service-account/au-dic',form).then(res => {
        if (res.status === 200) {
          this.tableData = res.data;
          this.page.total = res.total;
          this.merge(this.tableData, 'groupCode')
        }
      })
    },
    submit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          let form = {...this.form}
          if (form.id) {
            service.put('/small-service-account/au-dic', form).then(this.callback)
            this.init();
          } else {
            service.post('/small-service-account/au-dic', form).then(this.callback)
            this.init();
          }
        }
      })
    },
    edit(row) {
      this.form = row
      this.dialogShow = true
    },
    del(row) {
      service.del('/small-service-account/au-dic', {id: row.id}).then(this.callback)
    },
  }
}
</script>

<style scoped>

</style>